<template>
	<view class="uni_box home">
		<navbar title='达人商单'>
		</navbar>
		<view class="content">
			<view class="daone">
			
				<text class="tian">点亮身份-服务商</text>
				<text class="rushi">请如实填写，以免信息错误导致投诉/举报</text>

				<view class="fview">
					<view class="mitem">
						<view class="lxuan"></view>
						<text class="itemname">公司全称</text>
						<u-input class="shuru" v-model="name" type="text" :border="false" :placeholder-style="placeholderStyle" placeholder="已入驻林客的公司全称"/>
						<text class="zhantie" @click="pasteText()">粘贴</text>
					</view>
					<view class="mitem">
						<view class="lxuan"></view>
						<text class="itemname">服务商ID</text>
						<u-input class="shuru" v-model="name" type="text" :border="false" :placeholder-style="placeholderStyle" placeholder="林客平台服务商身份ID"/>
						<text class="zhantie" @click="pasteText()">粘贴</text>
					</view>
					<view class="shouxian"></view>
					<view class="shoufang">
						<view class="shouone">
							<text class="shoutit">服务领域</text>
							<text class="shoumiao zi">请如实勾选服务领域</text>
						</view>
						<view class="lingqie">
							<view class="qieitem">代直播</view>
							<view class="qieitem">代运营</view>
							<view class="qieitem">达人团长</view>
							<view class="qieitem">商品推广</view>
						</view>
					</view>
					<view class="shouxian"></view>
					<view class="shoufang">
						<view class="shouone">
							<text class="shoutit">联系方式</text>
							<text class="shoumiao zi">仅用于平台内部对接</text>
						</view>
						<view class="mitem">
							<view class="lxuan"></view>
							<text class="itemname">手机号码</text>
							<u-input class="shuru" v-model="name" type="text" :border="false" :placeholder-style="placeholderStyle" placeholder="负责人手机号码"/>
							<text class="zhantie" @click="pasteText()">粘贴</text>
						</view>
					</view>
					<view class="shouxian"></view>
					<view class="shoufang">
						<view class="shouone">
							<text class="shoutit">区域服务商</text>
							<text class="shoumiao zi">非区域服务商无需填写</text>
						</view>
						<view class="mitem">
							<text class="itemname">授权区域</text>
							<u-input class="shuru" v-model="name" type="text" :border="false" :placeholder-style="placeholderStyle" placeholder="请输入"/>
							<!-- <text class="zhantie" @click="pasteText()">粘贴</text> -->
						</view>
						<view class="mitem">
							<text class="itemname">授权行业</text>
							<u-input class="shuru" v-model="name" type="text" :border="false" :placeholder-style="placeholderStyle" placeholder="请输入"/>
							<!-- <text class="zhantie" @click="pasteText()">粘贴</text> -->
						</view>
					</view>

				</view>
			</view>
		
			<view class="datwo">
				<view class="dabtns">
					<view class="rightbtns">
						确认添加
					</view>
				</view>
				<text class="tian">添加即同意《达人商单用户协议》</text>
			</view>
		</view>
	</view>
</template>

<script>
import Clipboard from '@/utils/clipboard.js';
	export default {
		data() {
			return {
				name:'',
				placeholderStyle:'color:rgba(153, 153, 153, 1)'
			}
		},
		onLoad() {
			
		},
		onShow() {
		},
		methods: {
			pasteText(e){
				console.log(e)
				uni.getClipboardData({
					success: (res) => {
						console.log(res)
					}
				})	
				// Clipboard.pasteTextToElement('#inputElementId');
			}
		}
	}
</script>

<style lang="scss" scoped>
	page{
		background-color: #f8f8fd;
	}
	.content{
		background-color: #f8f8fd;
		.daone{
			padding: 30px 20px 120px;
			.zone{
				display: flex;
				align-items: center;
				justify-content: flex-end;
			}
			.datit{
				margin-left: auto;
				font-size: 12px;
				font-weight: 400;
				letter-spacing: 0px;
				line-height: 17.38px;
				color: rgba(119, 102, 231, 1);
			}
			.tian{
				display: block;
				text-align: center;
				font-size: 30px;
				font-weight: 500;
				letter-spacing: 0px;
				line-height: 43.44px;
				margin: 0px 0 2px;
				color: rgba(51, 51, 51, 1);
			}
			.rushi{
				font-size: 14px;
				font-weight: 400;
				display: block;
				text-align: center;
				color: rgba(153, 153, 153, 1);
			}
			
			.fview{
				margin-top: 20px;
				.lxuan{
					width: 10px;
					height: 100%;
					opacity: 1;
					border-radius: 9px 0px 0px 9px;
					background: rgba(119, 102, 231, 1);
					box-shadow: 0px 6px 10px  rgba(119, 102, 231, 0.08);
					left: 0;
					top: 0;
					position: absolute;
				}
				.mitem{
					margin-bottom: 10px;
					border-radius: 9px;
					background: rgba(255, 255, 255, 1);
					box-shadow: 0px 6px 10px  rgba(119, 102, 231, 0.08);
					display: flex;
					flex-direction: row;
					align-items: center;
					padding: 2px 15px 2px 10px;
					min-height: 50px;
					position: relative;

					.itemname{
						width: 70px;
						border-right: 1px solid rgba(232, 232, 252, 1);
						text-align: center;
						display: inline-block;
						font-size: 14px;
						font-weight: 400;
						color: rgba(51, 51, 51, 1);
						margin-right: 10px;
					}
					.iteminput{
						margin-right: 10px;
					}
					.itemval{
						font-size: 14px;
						font-weight: 400;
						color: rgba(51, 51, 51, 1);
						// max-width: 65%;
						flex: 1;
						display: inline-block;
					}
					.xiao{
						font-size: 11px;
					}
					
					.dinicon{
						width: 18px;
						height: 18px;
					}
					.zhantie{
						margin-left: auto;
						font-size: 12px;
						font-weight: 400;
						text-decoration-line: underline;
						color: rgba(119, 102, 231, 1);
					}
					.zise{
						color: rgba(119, 102, 231, 1);
					}
					.shuru{
						flex: 1;
						margin-right: 20rpx;
					}
					.hui{
						color: rgba(102, 102, 102, 1);
					}


					.daihuoli{
						display: flex;
						flex-direction: row;
						align-items: center;
						.jia{
							width: 36px;
							height: 36px;
							opacity: 1;
							border-radius: 9px;
							background: rgba(248, 248, 253, 1);
							display: flex;
							align-items: center;
							justify-content: center;
							position: relative;
							.jianicon{
								width: 18px;
								height: 18px;

							}
						}
						.dengname{
							display: inline-block;
							margin: 0 10px;
							font-size: 14px;
							font-weight: 400;
							color: rgba(119, 102, 231, 1);
						}
					}
					.dengji{
						margin-left: 10px;
						display: flex;
						flex-direction: row;
						align-items: center;
						.dengtu{
							font-size: 14px;
							font-weight: 400;
							color: rgba(51, 51, 51, 1);
							display: inline-block;
							margin-right: 5px;
						}
						.dengchaun{
							width: 42px;
							height: 21px;
							opacity: 1;
							border-radius: 3px;
							background: rgba(248, 248, 253, 1);
							box-shadow: 0px 0px 3px  rgba(119, 102, 231, 0.63);
							display: flex;
							align-items: center;
							justify-content: center;
							.chauntu{
								width: 12px;
								height: 12px;
							}
						}
					}
				}
				.shouxian{
					border: 1px dashed rgba(232, 232, 232, 1);
					display: block;
					margin: 20px 0 13px;
				}
				.shoufang{
					display: flex;
					flex-direction: column;
					
					.shouone{
						display: flex;
						flex-direction: row;
						margin-bottom: 10px;
						align-items: flex-end;
						.shoutit{
							font-size: 14px;
							font-weight: 400;
							color: rgba(51, 51, 51, 1);
							
						}
						.shoumiao{
							display: inline-block;
							margin-left: 20rpx;
							font-size: 12px;
							font-weight: 400;
							position: relative;
							top: -1px;
							color: rgba(153, 153, 153, 1);
						}
						.zi{
							color: rgba(119, 102, 231, 1);
						}
					}
					.shoutwo{
						display: flex;
						flex-direction: row;
						.shouchuan{
							width: 90px;
							height: 130px;
							margin-right: 20px;
							opacity: 1;
							border-radius: 9px 9px;
							background: rgba(255, 255, 255, 1);
							box-shadow: 0px 6px 10px  rgba(119, 102, 231, 0.08);
							.schuan{
								width: 100%;
								height: 90px;
								display: flex;
								align-items: center;
								justify-content: center;
								.jijiang{
									font-size: 12px;
									font-weight: 400;
									color: rgba(153, 153, 153, 1);
								}
							}
							.sshuoming{
								height: 40px;
								width: 100%;
								display: flex;
								align-items: center;
								justify-content: center;
								font-size: 14px;
								font-weight: 400;
								color: #999999;
								border-top: 2px solid #eee;
							}
						}
						
						.sative{
							.schuan{
								.jijiang{
									text-decoration-line: underline;
									color: rgba(119, 102, 231, 1);
								}
							}
						}
					}
					.lingqie{
						display: flex;
						flex-direction: row;
						flex-wrap: wrap;
						.qieitem{
							border-radius: 6px;
							background: rgba(255, 255, 255, 1);
							box-shadow: 0px 6px 10px  rgba(119, 102, 231, 0.08);
							padding: 10px 10px;
							font-size: 14px;
							font-weight: 400;
							margin-right: 10px;
							color: rgba(153, 153, 153, 1);
						}
					}
				}
			}
		}
	}
	.datwo{
		height: 113px;
		opacity: 1;
		border-radius: 9px;
		background: rgba(248, 248, 253, 1);
		box-shadow: 0px -6px 10px  rgba(119, 102, 231, 0.08);
		position: fixed;
		width: 100%;
		bottom: 0;
		z-index: 100;
		padding: 10px 20px 30px;
		display: flex;
		flex-direction: column;
		align-items: center;

		.dabtns{
			display: flex;
			flex-direction: row;
			width: 100%;
			.leftbtns{
				width: 160px;
				height: 45px;
				opacity: 1;
				border-radius: 50px 0px 0px 50px;
				background: rgba(255, 255, 255, 1);
				box-shadow: 0px 0px 3px  rgba(119, 102, 231, 0.63);
				display: flex;
				flex-direction: row;
				align-items: center;
				justify-content: center;
				.dui{
					margin-right: 5px;
					width: 18px;
					height: 18px;
				}
				.zhangname{
					font-size: 12px;
					font-weight: 400;
					color: rgba(119, 102, 231, 1);
				}
			}
			.rightbtns{
				width: 100%;
				height: 45px;
				opacity: 1;
				display: flex;
				flex-direction: row;
				align-items: center;
				justify-content: center;
				border-radius:50px;
				background: linear-gradient(90deg, rgba(119, 102, 231, 1) 0%, rgba(121, 72, 234, 1) 100%);
				box-shadow: 0px 0px 3px  rgba(119, 102, 231, 0.63);
				font-size: 16px;
				font-weight: 700;
				color: rgba(255, 255, 255, 1);
			}
		}
		.tian{
			display: block;
			text-align: center;
			font-size: 12px;
			font-weight: 400;
			color: rgba(153, 153, 153, 1);
			margin-top: 20rpx;

		}
	}
</style>
